﻿<script id="NewGameTemplate_Small" type="text/x-jquery-tmpl">
     <div class="content">
        <header>
            <span>NEW GAME</span>
        </header>
        <section>
            <div class="ContentSmall">Drag and create new game with your friends :)</div>
        </section>
    </div>
</script>


<script id="NewGameTemplate_Large" type="text/x-jquery-tmpl">
    <div class="content" style="height: 98%; overflow: auto">
        <header>
            <span>NEW GAME</span>
        </header>
  
        <section>            
            
            <div style="position: relative; float: left; width: 600px; margin-top:-5px;margin-left:15px">
                <table  cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td colspan="3" style="text-align:center; padding:10px">
                            Game level:
                            <select id="gameLevel">
                                <option value="5">5 %</option>
                                <option value="10" selected>10 %</option>
                                <option value="20">20 %</option>
                            </select>
                        </td>                        
                    </tr>
                    <tr style="margin-bottom:-5px">   
                        <td colspan="3">
                            <table style="width:100%" border="0px" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td style="text-align:center">
                                        <div style="background-color:#28a82b; margin-bottom:3px;padding:5px;text-align:center; font-weight: bold; color: #ced5d3; border:solid 1px; border-color: black">Gray Team</div>    
                                    </td>
                                    <td style="text-align:center">
                                        <div style="background-color:#28a82b; margin-bottom:3px;padding:5px;text-align:center; font-weight: bold; color: white; border:solid 1px; border-color: black;">&nbsp;&nbsp;&nbsp;Score&nbsp;&nbsp;&nbsp;</div>
                                    </td> 
                                    <td style="text-align:center">                            
                                        <div style="background-color:#28a82b; margin-bottom:3px;padding:5px;text-align:center; font-weight: bold; color: black; border:solid 1px; border-color: black">Black Team</div>
                                    </td>   
                                </tr>
                            </table>   
                        </td>                         
                    </tr>
                     <tr>
                        <td style="height:8px"></td>                        
                    </tr>
                    <tr>
                        <td></td>
                        <td style="text-align:center">
                            <input id="txtGrayPoints" style="width:50px;">:<input id="txtBlackPoints" style="width:50px;">
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="height:8px"></td>                        
                    </tr>
                    <tr>
                        <td>
                            <center>
                                Defense<br/>
                                <div id="PlayerGrayDefense" class="PlayerOnField PlayerGray" ></div>
                            </center>
                        </td>
                        <td rowspan="2" style="text-align: center">
                            <img src="/Images/whole_table.gif" style="height: 250px; width: 220px"/>
                        </td>
                        <td>
                            <center>
                                Attack<br/>
                                <div id="PlayerBlackAttack" class="PlayerOnField PlayerBlack"></div>
                            </center>
                        <td>
                    </tr>
                    <tr>
                        <td>
                            <center>
                                Attack<br/>
                                <div id="PlayerGrayAttack"class="PlayerOnField PlayerGray"></div>
                            </center>
                        </td>
                        <td>
                            <center>
                                Defense<br/>
                                <div id="PlayerBlackDefense" class="PlayerOnField PlayerBlack"></div>
                            </center>
                        <td>
                    </tr>
                     <tr>
                        <td style="height:8px"></td>                        
                    </tr>
                    <tr>
                        <td colspan="3" style="text-align:center">
                                <button id="btnSave">Save</button>
                        </td>                                
                    </tr>
                </table>
            </div>   
            <div style="position: relative; float: left; width: 170px; margin-top: -30px" >
                <div style="background-color:#28a82b; margin-bottom:3px;padding:5px;text-align:center; font-weight: bold; color: black; border:solid 1px; border-color: black">Players</div>    
                <div class="Players">
                    {{each Players}}
                    <div class="Player" >${$value.Login}</div>
                    {{/each}}
                </div>  
            </div>                           
        </section>
    </div>
</script>
